<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
  <head>
    <title>联系人</title>
    <link rel="stylesheet" href="css/bootstrap.min.css" />
	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript" src="js/bootstrap.min.js"></script>
	<script type="text/javascript" src="js/timeago.js"></script>
  </head>
  
  <body>
    <%@include file="include/topbar.jsp" %>

	<div class="container" style="margin-top: 60px">
			<div class="row">
				<jsp:include page="include/left.jsp">
					<jsp:param value="contact" name="tag"/>
				</jsp:include>
				
				<div class="span9">
			
			<ul style="margin-bottom:0px;border-radius: 3px 3px 0 0" class="breadcrumb">
				<li class="active">
					<a href="#"><i class="icon-user"></i>联系人</a>
				</li>
			</ul>
			<div class="wall">
				<div class="row">
					<div class="span3">
						<a class="btn span2" href="addcontact.jspx"><i class="icon-plus"></i>添加联系人</a>
						<div class="clear"></div>
						<ul style="margin-top:30px" class="unstyled">
						<c:forEach var="list" items="${contact}">
							<li style="line-height:30px">
								<i class="icon-list-alt"></i><a href="#" rel="${list.id}">${list.name}</a>
							</li>
						</c:forEach>	
						</ul>
					</div>
					<div style="min-height:400px;border-left:1px solid #ccc;padding-left:15px" class="span5">
					<div id="detail">
						<address>
							<h3 id="name"></h3>
							<p id="company"></p>
							<small >手机</small> <span id="mobile"></span><br/>
							<small>固话</small> <span id="tel"></span><br/><br/>
							<small>邮箱</small> <span id="email"></span><br/>
							<small>地址</small> <span id="address"></span><br/><br/>
							<small>主页</small> <a id="websitea" href=""><span id="website"></span></a><br/>
							<small>微博</small> <a id="weiboa" href=""><span id="weibo"></span></a><br/>
							<small>简介</small> <span id="content"></span><br/>
						</address>
						<div class="line">记录</div>
						<div id="log">
						<blockquote>
						  4月1日开演唱会
						  <small>樊凯发布于 3天前</small>
						</blockquote>
						</div>
						
						<a href="" id="allnote">查看所有记录</a>
						<br><br><br>
						<a href="" class="btn btn-primary" id="editcontact"><i class="icon-pencil icon-white"></i>编辑</a>
						<a class="btn btn-danger" id="deletecontact" rel=""><i class="icon-trash icon-white"></i>删除</a>
					</br>
					</div>
				</div>
			</div>
		</div>
  </body>
  <script type="text/javascript">
  	$(function() {
  		$("#detail").hide();
  		
  		$("a[rel]").click(function() {
  			var id = $(this).attr("rel");
  			$.ajax({
  				url : 'contact.jspx',
  				type : 'POST',
  				dataType: 'json',
  				data : {
  					m : 'get',
  					id : id
  				},
  				success : function(json) {
  					$("#name").text(json.contact.name);
	  				$("#content").text(json.contact.content);
		  			$("#company").text(json.contact.companyname);
		  			$("#mobile").text(json.contact.moblie);
		  			$("#tel").text(json.contact.tel);
		  			$("#email").text(json.contact.email);
		  			$("#address").text(json.contact.address);
		  			$("#website").text(json.contact.website);
		  			$("#websitea").attr("href", json.contact.website);
		  			$("#weibo").text(json.contact.weibo);
		  			$("#weiboa").attr("href", json.contact.weibo);
		  			
		  			$("#editcontact").attr("href", "editcontact.jspx?id=" + json.contact.id);
		  			$("#deletecontact").attr("href", "editcontact.jspx");
		  			$("#deletecontact").attr("rel", json.contact.id);
		  			$("#allnote").attr("href", "contactnote.jspx?id=" + json.contact.id);
		  			if(json.list.length == 0) {
		  				$("#log").html("<h3>没有记录</h3>");
		  			} else {
		  				$("#log").empty();
		  				$.each(json.list, function(i, n) {
		  					var small = $("<small>").text(n.name + "发表于");
		  					var abbr = $("<abbr>").attr({"class" : "timeago", "title" : n.createTime});
		  					small.append(abbr);
		  					$("<blockquote>").text(n.content).append(small).appendTo($("#log"));
		  				});
		  				$("abbr.timeago").timeago();
		  			}
  					$("#detail").show();
  				}
  			});
  		});
  	});
  	
  	$(function() {
  		$("abbr.timeago").timeago();
  	});
  	
  	/* $(function() {
  		$("#deletecontact").click(function() {
  			var id = $("#deletecontact").attr("rel");
  			$.ajax({
  				url : 'contact.jspx',
  				type : 'POST',
  				data : {
  					id : id,
  					m : 'delete'
  				},
  				success : function(msg) {
  					if(msg == 10001) {
  						$("a[rel='"+ id +"']").remove();
  						$("#detail").hide();
  					} else {
  						alert("删除失败");
  					}
  				}
  			});
  		});
  	}); */
  </script>
  
</html>
